<template>
  <div :class="ns.b()">
    <div :class="ns.e('page-title')">绿色设计产品名单</div>

    <div :class="ns.e('filter-wrapper')">
      <filter-search :width="162" v-model="searchTxt" placeholder="请输入企业名称" @enter="handlerInput" @clear="handlerInput" />
      <vc-filter :menus="menus"></vc-filter>
      <span :class="ns.e('total-num')">
        共计
        <sapn style="color: rgba(255, 89, 89, 1)">&nbsp;{{ totalNum }}&nbsp;</sapn>
        条
      </span>
    </div>

    <div :class="ns.e('table-wrapper')">
      <vc-table
        :loading="loading"
        :tableData="tableData"
        :columns="columns"
        :total="totalNum"
        :pageSize="queryData.pageSize"
        v-model:pageNum="queryData.pageNum"
        :defaultSort="{ field: 'noticeDate', order: 'desc' }"
        @page-change="handleCurrentChange"
        @sort-change="sortChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNamespace } from 'vc/src/use';
import FilterSearch from '@/components/page-search/index.vue';
import { useScreen } from './useScreen';
import { useTable } from './useTable';
import { getHbSubject } from '../apis';
import { usePage } from '@/use/usePage';

const ns = /* hoist-static*/ useNamespace('greenDesignList');
defineOptions({ name: ns.b() });

const { queryData, menus } = useScreen();

const { tableData, columns } = useTable();

const { loading, run } = useRequest(getHbSubject, {
  defaultParams: [queryData],
  onSuccess: (res) => {
    totalNum.value = res.total;
    tableData.value = res.values;
  }
});

const { totalNum, searchTxt, handlerInput, handleCurrentChange, sortChange } = usePage(queryData, run);
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
